import React, { memo } from 'react';

import { NavLink, Outlet } from "react-router-dom";

import { dicoverMenu } from "@/common/local-data";

import { DiscoverWrapper, TopMenu } from "./style";

const MyDiscover = memo(() => {

  return (
    <DiscoverWrapper>
      <div className="top">
        <TopMenu className="wrap-v1">
          {
            dicoverMenu.map(item => {
              return (
                <div className="item" key={item.title}>
                  <NavLink to={item.link}>{item.title}</NavLink>
                </div>
              )
            })
          }
        </TopMenu>
      </div>
      {/* 子路由(Route)出口 */}
      <Outlet />
    </DiscoverWrapper>
  )
})

export default MyDiscover